import { QueryClient, useQuery } from 'react-query';
import { dehydrate } from 'react-query/hydration';
import { useRouter } from "next/router";
import Layout from "@/components/layout";
import Profile from "@/components/profile";
import { getUserById } from "@/apis/user";
import { display } from "@/tools/debug-tools";

export default function ProfilePage(props) {
    const { userId } = useRouter().query;

    const { data: user } = useQuery(['user', userId], ({ queryKey }) => {
        const [_key, userId] = queryKey;
        return getUserById(userId)
    });

    return (
        <Layout>
            <Profile user={user}></Profile>
        </Layout>
    )
};

export async function getServerSideProps({ query }) {
    const queryClient = new QueryClient()

    await queryClient.prefetchQuery(['user', query.userId], ({ queryKey }) => {
        const [_key, userId] = queryKey;
        return getUserById(userId);
    });


    return {
        props: {
            dehydratedState: dehydrate(queryClient),
        },
    }
}